<template>
  <div class="banner-container">
    <el-table 
      :data="computedTableData" 
      style="width: 100%"
      :header-cell-style="headerCellStyle"  
      :cell-style="{textAlign:'center'}"
    >
      <el-table-column type="index" label="序号" width="80" align="center" />
      <el-table-column prop="img" label="图片" align="center">
        <template #default="{row}">
          <el-image :src="row.img"></el-image>
        </template>
      </el-table-column>
      <el-table-column prop="link" label="链接" align="center"></el-table-column>
      <el-table-column prop="alt" label="描述" align="center"></el-table-column>

      <el-table-column label="操作" align="center">
        <template #default="{row}">
          <el-popconfirm confirm-button-text="确认" cancel-button-text="取消" title="确定要删除吗?" @confirm="handleDelete(row.bannerid)">
            <template #reference>
              <el-button type="danger" size="small">删除</el-button>
            </template>
          </el-popconfirm>
          <el-button type="primary" size="small" @click=" dialogFormVisible  = true">添加</el-button>
          
        </template>
      </el-table-column>
    </el-table>
    
    <!--分页组件的调用-->
    <el-pagination 
      background 
      layout="total ,prev, pager, next" 
      :total="tableData.length" 
      :page-size="pageSize"
      v-model:current-page="currentPage"
    />
    
       <!-- 对话框 -->
       <el-dialog title="添加轮播图" v-model="dialogFormVisible ">
        <el-form :model="form">
          <el-form-item label="图片链接" :label-width="formLabelWidth">
            <el-input v-model="form.img" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="商品链接" :label-width="formLabelWidth">
            <el-input v-model="form.link" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="商品描述" :label-width="formLabelWidth">
            <el-input v-model="form.alt" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogFormVisible1"
              >确 定</el-button
            >
          </span>
        </template>
      </el-dialog>
  </div>
</template>


<script>
import bannerData from '@/api/banner';

export default {
  data() {
    return {
      tableData: bannerData,
      dialogFormVisible: false,
      currentPage: 1,
      pageSize: 3,
      headerCellStyle: { backgroundColor: '#f5f5f5', fontSize: '14px', fontWeight: 'bold', borderBottom: '2px solid #e1e1e1' },
      form: {
        img: '',
        link: '',
        alt: '',
        },
        formLabelWidth: '120px',
    }
  },
  computed: {
    computedTableData() {
      const start = (this.currentPage - 1) * this.pageSize
      const end = start + this.pageSize
      return this.tableData.slice(start, end)
    }
  },
  methods: {
    dialogFormVisible1(){
      this.tableData.push(this.form)
      this.dialogFormVisible = false
    },
    handleDelete(id) {
    this.tableData = this.tableData.filter(item => item.bannerid !== id)
    this.$message.success('删除成功')
  },

  addBanner() {
    this.$prompt('请输入图片地址', '添加', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      inputPattern: /^(http|https):\/\/(.*)\.(jpg|jpeg|png|gif)$/i,
      inputErrorMessage: '图片地址格式不正确',
    }).then(({ value }) => {
      // 创建新的对象存储用户输入的数据
      const newBanner = {
        bannerid: new Date().getTime(),
        img: value,
        link: '',
        alt: ''
      };
      // 添加到 tableData 数组中
      this.tableData.push(newBanner);
      this.$message.success('添加成功');
    }).catch(() => {
      // 用户取消输入
    });
  }
}

}

</script>
<style scoped lang="scss">
.banner-container {
  padding: 20px;

  .el-table__header {
    background-color: #f5f5f5;
    font-size: 14px;
    font-weight: bold;
    border-bottom: 2px solid #e1e1e1;
  }

  .el-table__row:hover {
    background-color: #f5f5f5;
  }

  .el-image {
    width: 120px;
    height: 80px;
    object-fit: cover;
    border-radius: 4px;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
  }

  .el-button--danger {
    background-color: #f44336;
    border-color: #f44336;
    margin-right: 10px;
  }

  .el-button--danger:hover {
    background-color: #f44336;
    border-color: #f44336;
  }

  .el-pagination {
    margin-top: 20px;
    text-align: right;

    .el-pagination__total {
      font-size: 14px;
      color: #333;
      margin-right: 10px;
    }

    .el-pagination__jump {
      display: none;
    }
  }
}
</style>


